<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" isELIgnored="false">

<head>
    <meta charset="UTF-8">
    <link href="http://java.sun.com/jsp/jstl/core" >
    <title>订单查询</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style type="text/css">

        thead{
            color: #110b0c;
            background-color: #bfd660;
        }
        td {
            border: 0px solid #d0d0d0;
            color: #404060;
            padding: 10px;
            text-align: center;
        }
        .aaa{
            margin: 5% 0 10%  auto; /* 定宽块级元素的水平居中通过设置左右margin为auto来实现*/
            width: 80%;
            height: max-content;
            background: rgba(0, 0, 0, 0.01);
            padding: 20px;
            color: #0c70ff;
        }
        .div1{
            height: 70%;
        }
    </style>
    <script>
        window.onload = () => {
            let element1 = document.getElementById('1')
            let element2 = document.getElementById('2')
            let element3 = document.getElementById('3')
            let elseElement = document.getElementById('else')
            if (element1.classList.contains('active')) {
                element1.classList.remove('active')
            }
            if (element2.classList.contains('active')) {
                element2.classList.remove('active')
            }
            if (element3.classList.contains('active')) {
                element3.classList.remove('active')
            }
            if (elseElement.classList.contains('active')) {
                elseElement.classList.remove('active')
            }
            let currPagePath = window.location.search
            let equalIndex = currPagePath.indexOf('=')
            let currPage = currPagePath.substring(equalIndex + 1)
            if (currPage > 3) {
                elseElement.classList.add('active')
            } else {
                let element = document.getElementById('' + currPage)
                element.classList.add('active')
            }
        }
    </script>
</head>
<body style="text-align: center">
<nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav" >
        <li class="nav-item">
            <a class="nav-link" href="/aaa">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/adminDoUser">用户信息</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/mainPage">货物信息</a>
        </li>

    </ul>
</nav>


<div class="div1">
    <table style="margin: auto;" frame="box" cellspacing="0">
        <div style="width: 63.5%;height: 40px">
            <!--/*@thymesVar id="content" type=""*/-->
            <input id="query_content" type="text" placeholder="请输入货物名称"  th:value="${content}" style="height: 30px;width:300px;">
            <button type="button"  onclick="queryByLike();" style="height:40px;width: 50px;">搜索</button>
        </div>
        <thead>
        <tr >
            <th >订单号</th>
            <th >客户编号</th>
            <th>员工编号</th>
            <th >货物</th>
            <th >送货地址</th>
            <th >金额</th>
            <th >订货日期</th>
            <th >交货日期</th>
            <th >状态</th>
            <th >操作1</th>
            <th >操作2</th>
            <th >操作3</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr th:each="order : ${pageBean.lists}">
            <td th:text="${order.order_id}"></td>
            <td th:text="${order.customer_id}"></td>
            <td th:text="${order.staff_id}" ></td>
            <td th:text="${order.cargo}"></td>
            <td th:text="${order.address}"></td>
            <td th:text="${order.money}"></td>
            <td th:text="${order.order_date}"></td>
            <td th:text="${order.delivery_date}"></td>
            <td th:text="${order.status}"></td>
            <td ><a th:href="'delete?order_id='+${order.order_id}" ><button style="border: none ">删除</button></a></td>
            <td ><a th:href="adminAdd"><button style="border: none">增加</button></a></td>
            <td ><a th:href="${'adminEdit?order_id='+order.order_id}"><button style="border: none ">修改</button></a></td>
        </tr>
        </tbody>
    </table>

</div>

<div class="aaa">
    <div class="container" >
        <ul  class="pagination" id="pagination">
            <li class="page-item"><a class="page-link " th:href="${'mainPage?currentPage='+1}">首页</a></li>
            <li class="page-item"><a class="page-link" th:href="'mainPage?currentPage='+${pageBean.currPage-1}"><<</a></li>
            <li class="page-item" id="1"><a class="page-link" th:href="${'mainPage?currentPage='+1}">1</a></li>
            <li class="page-item" id="2"><a class="page-link" th:href="${'mainPage?currentPage='+2}">2</a></li>
            <li class="page-item" id="3"><a class="page-link" th:href="${'mainPage?currentPage='+3}">3</a></li>
            <li class="page-item" id="else"><a class="page-link">...</a></li>
            <li class="page-item"><a class="page-link" th:href="'mainPage?currentPage='+${pageBean.currPage+1}">>></a></li>
            <li class="page-item"><a class="page-link" th:href="'mainPage?currentPage='+${pageBean.totalPage}">末页</a></li>
            <li class="page-item"><a class="page-link">共&nbsp;<span th:text="${pageBean.totalPage}"></span>&nbsp;页</a></li>
            <li class="page-item"><a class="page-link">当前第<span th:text="${pageBean.currPage}"></span>页</a></li>
            <li class="page-item"><a class="page-link" style="height: 38px" >跳转到第<input  size="3"   type="text" id="ww" name="gotoPageNo" th:value="${qq}">页</a></li>
            <li class="page-item"><a class="page-link" onclick="last()">确认</a></li>
            <li class="page-item"><a class="page-link" href="javascript:history.back(-1)">返回</a></li>
        </ul>
    </div>

</div>
</body>
<script type="text/javascript">

    function queryByLike(){//搜索
        var content = document.getElementById("query_content").value;
        window.location.href="selectorderByLike?content="+content;
    }
    function last() {//跳转到第几页
        var value = document.getElementById("ww").value;
        window.location.href="mainPage?currentPage="+value;
        click()
    }
    //鼠标点击行变色
    var tb = document.getElementById('tb');
    tb.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    tb.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }


    var ts = document.getElementById('ts');
    ts.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    ts.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }
</script>
</html>
